<template>
  <div class="product-details">
    <el-row style="margin-top: 20px"></el-row>
    <el-row :gutter="20">
      <el-col :span="6" :offset="3">
        <el-image :src="product.image">
          <div slot="error" class="image-slot">
            <div style="margin-top: 60%" />
            <i class="el-icon-picture-outline"></i>
            <span class="demonstration">商品图将会显示在这里</span>
          </div>
        </el-image>
      </el-col>
      <el-col :span="10">
        <el-form @submit.native.prevent>
          <el-form-item label="制造商">
            <small style="float: left;">{{ product.manufacturer.name }}</small>
          </el-form-item>
          <el-form-item label="商品名">
            <h3 style="float: left;">{{ product.name }}</h3>
          </el-form-item>
          <el-form-item label="商品描述">
            <p style="float: left;">
              {{ product.description }}
            </p>
          </el-form-item>
          <el-form-item label="购买数量">
            <el-input-number
              v-model="total"
              controls-position="right"
              :min="0"
              :max="product.total"
              style="float: left;"
            ></el-input-number>
            <p style="float: left;">（剩余 {{ product.total }} 件）</p>
          </el-form-item>
          <el-form-item label="单价（元）">
            <h1 style="float: left;">{{ product.price }}</h1>
          </el-form-item>
          <el-button
            v-if="isAdding"
            @click="addToCart"
            type="success"
            size="small"
            :disabled="total === 0"
            style="float: left;"
          >
            加入购物车
          </el-button>
          <el-button
            v-else
            @click="removeFromCart(product._id)"
            type="danger"
            size="small"
            style="float: left;"
          >
            从购物车移除
          </el-button>
        </el-form>
      </el-col>
    </el-row>
    <div></div>
  </div>
</template>

<style>
.product-details__image .image {
  width: 50%;
  height: 50%;
}
</style>

<script>
import ProductButton from "./ProductButton";
import { Message } from "element-ui";
export default {
  props: ["product", "store"],
  data() {
    return {
      total: 0,
    };
  },
  computed: {
    isAdding() {
      let isAdding = true;
      this.store.state.cart.map((product) => {
        if (product._id === this.product._id) {
          isAdding = false;
        }
      });
      return isAdding;
    },
  },
  methods: {
    isLogged() {
      return !!this.$store.state.user.token;
    },
    addToCart() {
      if (!this.isLogged()) {
        Message({
          message: "请先登录",
          type: "info",
        });
        this.$router.push("/user/login");
        return;
      }
      this.store.commit("ADD_TO_CART", {
        product: this.product,
      });
    },
    removeFromCart(productId) {
      if (!this.isLogged()) {
        Message({
          message: "请先登录",
          type: "info",
        });
        this.$router.push("/user/login");
        return;
      }
      this.store.commit("REMOVE_FROM_CART", {
        productId,
      });
    },
  },
};
</script>